<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<my-com1></my-com1>
		</div>
	</body>
	<script>
	/**
	 * 组件化:从UI界面的角度进行划分，指前端的组件化，方便UI组件重复使用
	 */
		//1.1 使用Vue.extend 来创建全局的Vue组件
		var com1=Vue.extend({
			//通过 template 属性，指定组件要展示的HTML结构
			template:'<h3>这是使用Vue.extend创建的组件</h3>'
		});
		/**
		 * 1.2使用Vue.eomplate('组件的名称',创建出来的组件模板对象)
		 * 
		 * 如果使用Vue.complate 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件时，
		 * 需要把大写的驼峰改为小写的字母，同时在两个单词之间，使用 '-' 链接
		 */
		Vue.component('myCom1',com1);
		
		var vue=new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			}
		});
	</script>
</html>